﻿<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>登录</title>
<style>
* {
	padding: 0;
	margin: 0;
}

body {
	width: 100%;
	height: 100vh;
	background-image: linear-gradient(45deg, #303F9F, #512DA8, #7B1FA2);
}

/* form 标签外层 div 样式 */
.login-box {
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100vh;
	background-image: linear-gradient(45deg, #D32F2F, #C2185B, #7B1FA2);
	transition: left 1s;
}

/* form 表单样式 */
.login-form {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -80%);
	width: 400px;
}

/* 标题 */
.login-form h1 {
	font-weight: 400;
	color: #fff;
}

/* 账号 密码框样式 */
.login-form .txtb, .login-form .login-btn {
	border: none;
	outline: none;
	border-radius: 5px;
	width: 100%;
	height: 40px;
	padding: 0 20px;
	margin: 5px 0;
	background-color: rgba(0, 0, 0, .3);
	color: #fff;
}

/* 登录按钮样式 */
.login-form .login-btn {
	cursor: pointer;
	width: 440px;
	background-color: rgba(0, 0, 0, .3);
	color: #fff;
}

.hide-login-btn {
	position: absolute;
	top: 40px;
	right: 40px;
	width: 50px;
	height: 40px;
	cursor: pointer;
}

/* show-login-btn */
.show-login-btn {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	height: 50px;
	width: 200px;
	padding: 0 50px 0 70px;
	background-color: rgba(0, 0, 0, .3);
	cursor: pointer;
	border-radius: 10px;
}

.show-login-btn .icon {
	color: #fff;
	padding: 10px;
	height: 30px;
	width: 30px;
}

.show-login-btn p {
	color: #fff;
	line-height: 50px;
	float: left;
}

.showed {
	left: 0;
}
</style>
</head>
<body>
	<!-- <div id="main">
		<h2>登录小秘书系统</h2>
		<hr color="#ccc">
		<br>
		<form action="loginctl.jsp" method="post">
			<span>用户名:</span> <input name="uname" type="text"><br>
			<br> <span>密码:</span> <input name="pwd" type="password"><br>
			<br> <span></span><input value="登录" type="submit"> <a
				href="http://localhost:8080/MyShop2/page/login.html">注册</a>
		</form>
	</div> -->
	<div class="show-login-btn">
		<p>Show Login Form</p>
		<svg t="1589357681218" class="icon" viewBox="0 0 1024 1024"
			version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5789"
			width="200" height="200"> <path
			d="M521.7 82c-152.5-0.4-286.7 78.5-363.4 197.7-3.4 5.3 0.4 12.3 6.7 12.3h70.3c4.8 0 9.3-2.1 12.3-5.8 7-8.5 14.5-16.7 22.4-24.5 32.6-32.5 70.5-58.1 112.7-75.9 43.6-18.4 90-27.8 137.9-27.8 47.9 0 94.3 9.3 137.9 27.8 42.2 17.8 80.1 43.4 112.7 75.9 32.6 32.5 58.1 70.4 76 112.5C865.7 417.8 875 464.1 875 512c0 47.9-9.4 94.2-27.8 137.8-17.8 42.1-43.4 80-76 112.5s-70.5 58.1-112.7 75.9c-43.6 18.4-90 27.8-137.9 27.8-47.9 0-94.3-9.4-137.9-27.8-42.2-17.8-80.1-43.4-112.7-75.9-7.9-7.9-15.3-16.1-22.4-24.5-3-3.7-7.6-5.8-12.3-5.8H165c-6.3 0-10.2 7-6.7 12.3C234.9 863.2 368.5 942 520.6 942c236.2 0 428-190.1 430.4-425.6C953.4 277.1 761.3 82.6 521.7 82zM395.025 624v-76h-314c-4.4 0-8-3.6-8-8v-56c0-4.4 3.6-8 8-8h314v-76c0-6.7 7.8-10.5 13-6.3l141.9 112c4.1 3.2 4.1 9.4 0 12.6l-141.9 112c-5.2 4.1-13 0.4-13-6.3z"
			p-id="5790" fill="#ffffff"></path></svg>
	</div>
	<div class="login-box">
		<svg t="1589356319655" class="hide-login-btn" viewBox="0 0 1024 1024"
			version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2142"
			width="200" height="200"> <path
			d="M810.666667 273.493333L750.506667 213.333333 512 451.84 273.493333 213.333333 213.333333 273.493333 451.84 512 213.333333 750.506667 273.493333 810.666667 512 572.16 750.506667 810.666667 810.666667 750.506667 572.16 512z"
			p-id="2143" fill="#ffffff"></path></svg>
		<form action="login" method="post" class="login-form">
			<h1>欢迎</h1>
			<input type="text" placeholder="账号" class="txtb" name="username"> 
			<input type="password" placeholder="密码" class="txtb" name="password">
			<input type="submit" value="登录" class="login-btn">
		</form>
	</div>
	<script>
		var hideBtn = document.getElementsByClassName('hide-login-btn')[0];
		var showBtn = document.getElementsByClassName('show-login-btn')[0];
		var loginBox = document.getElementsByClassName('login-box')[0];

		showBtn.addEventListener('click', function() {
			loginBox.className = "login-box showed";
		});

		hideBtn.addEventListener('click', function() {
			loginBox.className = "login-box";
		});
	</script>
</body>
</html>

